<!DOCTYPE html>
<html lang="en" class="beauty-scroll">
<head>
    <meta charset="UTF-8">
    <title>super-data-api</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/css/element-ui.css">
    <link rel="stylesheet" href="static/css/index.css">
    <script src="static/js/vue.js"></script>
    <!-- 引入element-ui js-->
    <script src="static/js/element-ui.js"></script>
    <script src="static/js/axios.min.js"></script>
    <script src="static/js/lodash.min.js"></script>
    <script src="static/js/config.js"></script>
    <link rel="shortcut icon" href="static/pic/web.jpg">
    <style>
        html,body{
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body >
    <div class="homeBox" id="box">
        <div class="homeLeft" >
            <img src="static/pic/super-api.jpg" class="superDataApiPic">
            <div class="homeBtn" :class="{choseBtn:choseValue == 1}" @click="chose(1)">数据库配置</div>
            <div class="homeBtn" :class="{choseBtn:choseValue == 2}" @click="chose(2)">接口</div>
        </div>
        <div class="homeRight">
            <iframe src="./datasource.html" frameborder="0" width="100%" height="100%"  v-if="choseValue == 1"></iframe>
            <iframe src="./interface.html" frameborder="0" width="100%" height="100%"  v-if="choseValue == 2"></iframe>
        </div >
    </div>
</body>
<script>

    new Vue({
        el: '#box',
        data: function () {
            return {
                choseValue:1
            }
        },
        mounted () {
            this.getBackEndHost()
        },
        computed: {

        },
        methods: {
            chose(value){
                this.choseValue =value
            },
            async getBackEndHost() {
                if(BASE_URL == null || BASE_URL == ''){
                    BASE_URL = window.location.host;
                }
            }
        },
        created: function () {
        },
    });

</script>
</html>
